<template>
  <el-card shadow="never">
    <el-form label-width="auto" :inline="true" size="small">
      <el-row>
        <el-col :span="6">
          <el-form-item label="合同名称" style="width: 85%">
            <el-input
              v-model="searchForm.contractName"
              placeholder="请输入 合同名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="采购单位" style="width: 85%">
            <el-input
              v-model="searchForm.purchaseDeptName"
              placeholder="请输入 采购单位"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目名称" style="width: 85%">
            <el-input
              v-model="searchForm.projectName"
              placeholder="请输入 项目名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收款日期" style="width: 85%">
            <el-date-picker
              v-model="searchForm.receiveDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始"
              end-placeholder="结束"
              value-format="YYYY-MM-DD"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align: right">
          <el-button
            color="#1E3485"
            :icon="Edit"
            @click="toDetail({ title: '新建收款', action: 'add' }, 'add')"
            >新建</el-button
          >
          <el-button
            color="#1E3485"
            :icon="Search"
            @click="
              tablePage.currentPage = 1;
              getList();
            "
            >搜索</el-button
          >
          <el-button type="default" :icon="Delete" @click="clearAllFields"
            >清空</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      border
      min-height="300"
      header-align="center"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="tableData"
      :loading="tableLoading"
      style="margin-top: 1%"
      size="mini"
    >
      <vxe-column
        type="seq"
        title="序号"
        fixed="left"
        width="50"
        align="center"
      />
      <vxe-column
        v-for="column in tableColumns"
        :key="column.field"
        header-align="center"
        :field="column.field"
        :title="column.title"
        :min-width="column.width"
        :align="column.align"
        show-overflow
      >
        <template v-slot:default="{ row }">
          {{ row[column.field] }}
        </template>
      </vxe-column>
      <vxe-column title="操作" fixed="right" width="200" align="center">
        <!-- 操作列按钮 -->
        <template v-slot="{ row }">
          <vxe-button
            v-if="
              row.auditStatus === '待提交' || row.auditStatus === '审批驳回'
            "
            mode="text"
            @click="submitApproval(row)"
            >提交审批</vxe-button
          >
          <vxe-button
            v-if="
              row.auditStatus === '待提交' || row.auditStatus === '审批驳回'
            "
            mode="text"
            @click="
              toDetail(
                {
                  id: row.id,
                  title: '',
                  action: 'edit'
                },
                'edit'
              )
            "
            >编辑</vxe-button
          >
          <vxe-button
            mode="text"
            @click="
              toDetail(
                {
                  id: row.id,
                  title: '',
                  action: 'view'
                },
                'view'
              )
            "
            >查看</vxe-button
          >
          <vxe-button
            v-if="
              row.auditStatus === '待提交' || row.auditStatus === '审批驳回'
            "
            mode="text"
            @click="delApproval(row)"
            >删除</vxe-button
          >
          <!-- <vxe-button @click="GLFP(row)">关联发票</vxe-button> -->
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      v-model:current-page="tablePage.currentPage"
      v-model:page-size="tablePage.pageSize"
      :layouts="[
        'Sizes',
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'FullJump',
        'Total'
      ]"
      :total="tablePage.total"
      size="small"
      @page-change="handlePageChange"
    />
  </el-card>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Search, Edit } from "@element-plus/icons-vue";
import { VxePagerEvents } from "vxe-table";
import { useDetail } from "./components/utils/hooks";
import {
  getreceivePaymentlist,
  submitApprovalApi,
  delApprovalApi
} from "@/api/ERP_PaymentMange";
///////////////////////// 公共 /////////////////////////
// 路由跳转
//const router = useRouter();
const { toDetail, router } = useDetail();
// 清空按钮点击事件
const clearAllFields = () => {
  for (const key in searchForm) {
    if (searchForm.hasOwnProperty(key)) {
      if (key === "receiveDate") {
        searchForm[key] = null;
      } else {
        searchForm[key] = "";
      }
    }
  }
};
///////////////////////// 数据展示 /////////////////////////
// 表单字段
const searchForm = reactive({
  contractName: "", // 订单编号
  purchaseDeptName: "", //采购单位
  projectName: "", //项目名称
  receiveDate: "" //日期
});
// 表格数据
let tableData = ref([]);
let tableLoading = ref(false);
const tableColumns = reactive([
  {
    field: "contractNo",
    title: "合同编号",
    width: 200
  },
  {
    field: "contractName",
    title: "合同名称",
    width: 200
  },
  {
    field: "contractTotalPrice",
    title: "合同金额(元)",
    width: 120,
    align: "right"
  },
  {
    field: "purchaseDeptName",
    title: "采购单位",
    width: 200
  },
  {
    field: "projectDeptName",
    title: "项目所属分公司",
    width: 200
  },
  {
    field: "projectName",
    title: "项目名称",
    width: 200
  },
  {
    field: "receiveNodeName",
    title: "收款类型",
    width: 120,
    align: "center"
  },
  {
    field: "receiveDate",
    title: "收款时间",
    width: 120,
    align: "center"
  },
  {
    field: "receivePrice",
    title: "收款金额(元)",
    width: 120,
    align: "right"
  },
  {
    field: "createdBy",
    title: "创建人",
    width: 120,
    align: "center"
  },
  {
    field: "auditStatus",
    title: "状态",
    width: 120,
    align: "center"
  },
  {
    field: "receiveTypeName",
    title: "收款方式",
    width: 120,
    align: "center"
  },
  {
    field: "createdAt",
    title: "创建时间",
    width: 180,
    align: "center"
  },
  {
    field: "claimStatus",
    title: "认领状态",
    width: 120,
    align: "center"
  },
  {
    field: "relatedStatus",
    title: "发票状态",
    width: 120,
    align: "center"
  }
]);
// 表格分页配置
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});
// 表格分页事件
const handlePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  getList();
};
// 获取项目订单列表
const getList = (query?: string) => {
  let params: any = {};
  params.pageIndex = tablePage.currentPage;
  params.pageSize = tablePage.pageSize;
  params.contractName = searchForm.contractName;
  params.purchaseDeptName = searchForm.purchaseDeptName;
  params.projectName = searchForm.projectName;
  getreceivePaymentlist(params).then((response: any) => {
    response.data.records.forEach(res => {
      //创建时间
      if (res.createdAt) {
        res.createdAt = dayjs(res.createdAt).format("YYYY-MM-DD HH:mm:ss");
      }
      //状态
      if (res.auditStatus == "0") {
        res.auditStatus = "待提交";
      } else if (res.auditStatus == "1") {
        res.auditStatus = "审批中";
      } else if (res.auditStatus == "2") {
        res.auditStatus = "审批通过";
      } else if (res.auditStatus == "3") {
        res.auditStatus = "审批驳回";
      } else if (res.auditStatus == "4") {
        res.auditStatus = "撤回";
      }
      //收款类型
      if (res.nodeType == "0") {
        res.nodeType = "合同预收款";
      } else if (res.nodeType == "1") {
        res.nodeType = "订单预收款";
      } else if (res.nodeType == "2") {
        res.nodeType = "实收款";
      }
      //认领状态
      if (res.claimStatus == "1") {
        res.claimStatus = "未认领";
      } else if (res.claimStatus == "2") {
        res.claimStatus = "部分认领";
      } else if (res.claimStatus == "3") {
        res.claimStatus = "已认领";
      }
      //发票状态
      if (res.relatedStatus == "1") {
        res.relatedStatus = "未关联";
      } else if (res.relatedStatus == "2") {
        res.relatedStatus = "部分关联";
      } else if (res.relatedStatus == "3") {
        res.relatedStatus = "已关联";
      }
    });

    tableData.value = response.data.records;
    tablePage.total = response.data.totalElements;
  });
  if (query) {
    setTimeout(() => {
      getreceivePaymentlist;
    }, 1500);
  }
};
const submitApproval = row => {
  ElMessageBox.confirm("是否提交审批?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    let params: ApiParams = {};
    params.id = row.id;
    try {
      const response: ApiResponse = await submitApprovalApi(params);
      if (response.code === 200) {
        ElMessage.success("提交成功");
        getList();
      } else {
        ElMessage.error("提交失败: " + response.msg);
      }
    } catch (error) {}
  });
};
const delApproval = row => {
  ElMessageBox.confirm("是否删除记录?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    let params: ApiParams = {};
    params.id = row.id;
    try {
      const response: ApiResponse = await delApprovalApi(params);
      if (response.code === 200) {
        ElMessage.success("删除成功");
        getList();
      } else {
        ElMessage.error("删除失败: " + response.msg);
      }
    } catch (error) {}
  });
};

// 初始化
onMounted(async () => {
  getList();
});
</script>

<style lang="scss" scoped></style>
